<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="f" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>发布房间信息</title>
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no"/>
    <link href="/landlord/css/put_all.css" rel="stylesheet"
          type="text/css"/>
    <style>

        li {
            text-align: center;
            height: 45px;
            background-color: white;
            width: 100%;
            margin-bottom: 5px;
        }

        label {
            font-size: 28px;
            color: #636281;
        }

        .select_icon img {
            width: 100%;
            height: 100%;
        }

    </style>

    <script type="text/javascript">
        top.setTitle('确认');
    </script>


</head>

<body>


<div class="main-part-two">

    <%--@elvariable id="room" type="demo.pojo.room.Room"--%>
    <f:form id="form" modelAttribute="room">

    <input type="hidden" name="_flowExecutionKey"
           value="${flowExecutionKey} }"/>

    <div class="form-info">

        <div class="row">
            <div class="col-ui-12 label-txt"><em>房间名称：</em>
            </div>
            <div class="col-ui-12">
                <div style="margin-left:15%;">
                    <span style="color: #3A649B">${room.name}</span>
                </div>
            </div>
        </div>

        <div style="width: 100%;height: 1px;background-color: black"></div>
        <div class="form-info">

            <div class="row">
                <div class="col-ui-12 label-txt"><em>简单描述：</em>
                </div>
                <div class="col-ui-12">
                    <div style="margin-left:15%;">
                        <span style="color: #3A649B">${room.description}</span>
                    </div>
                </div>
            </div>

            <div style="width: 100%;height: 1px;background-color: black"></div>


            <h3 class="row">展示图片:</h3>
            <div class="row">
                <div class="col-ui-12" style="float: none; margin:0 10px;">
                    <div class="add-pic">
                        <ul style="margin-left: 15%" class="overflow" id="imgList">
                        </ul>
                    </div>
                </div>
            </div>

            <div style="width: 100%;height: 1px;background-color: black"></div>

            <div class="row">
                <div class="col-ui-12 label-txt">
                    <em>位置：</em>
                </div>
                <div class="col-ui-12">
                    <div style="margin-left:15%;">
                    <span style="color: #3A649B">
                            ${room.location.address}<br>
                            ${room.location.detailedDescription}
                    </span>
                    </div>

                </div>
            </div>
            <div style="width: 100%;height: 1px;background-color: black"></div>

            <em>定价：</em>
            <div class="row">
                <div class="col-ui-12" style="float: none; margin:0 10px;">
                    <div style="margin-left: 10%">
                        <ul id="priceList">
                            <c:forEach items="${room.prices}" var="p">
                                <c:if test="${p.price>=0}">
                                    <li><label>${p.toString()}</label></li>
                                </c:if>
                            </c:forEach>

                        </ul>
                    </div>
                </div>
            </div>
            </f:form>

            <div class="foot-box">
                <table>
                    <tr>
                        <td>
                            <input class="btn-st01" name="_eventId_onOk" id="next" type="submit" value="提交">
                        </td>
                    </tr>
                </table>
            </div>

        </div>
    </div>

    <script type="text/javascript" src="https://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.js"></script>

    <c:if test="${!empty room.images && room.images.size()>0}">
        <script type="text/javascript">
            //声明一个图片列表
            var imgs = [];
        </script>
        <c:forEach items="${room.images}" var="imgUrl">
            <script type="text/javascript">
                //将原图片id放入该列表中
                imgs.push('${imgUrl}');
            </script>
        </c:forEach>
        <script type="text/javascript">

            let imgList = $('#imgList');


            //定义列表移除函数
            function rm(ls, v) {
                let n = ls.length;
                for (let i = 0; i < n; i++) {
                    if (ls[i] === v) {
                        ls.splice(i, 1);
                        i--;
                        n--;
                    }
                }
            }


            let ds = [];

            //需要从列表中移除的选项
            for (let i in imgs) {
                if (imgs[i].startsWith("a-")) {
                    //图片的真实id
                    let id = imgs[i].substr(2);
                    //插入图片
                    imgList.append('<li class=img_' + id + '><img src=/resource/preview/5/' + id + '.jpg ></li>');
                    ds.push(imgs[i]);
                } else if (imgs[i].startsWith("d-")) {
                    ds.push(imgs[i]);
                }

            }

            for (let i in ds){
                rm(imgs, ds[i]);
            }


            for (let i in imgs) {
                let id = imgs[i];
                imgList.append('<li class=img_' + id + '><img src=/resource/preview/5/' + id + '.jpg ></li>');
            }

        </script>

    </c:if>


</div>
</body>
</html>